<template>
	<view class="popularGames" :style="{'background': theme.backgroundColor}" >
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px'}" class="index_nav">
			<view class="index_nav_banner">
				<image :src="theme.index_nav_banner"></image>
			</view>
			<view class="nav_head">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_search">
						<image src="../../static/popularGames/search.png"  @click="navigateTo('search')"></image>
					</view>
					<view class="head_right_more">
						<image src="../../static/popularGames/more.png"  @click="navigateTo('serve')"></image>
					</view>
				</view>
			</view>
			<view class="nav_shop">
				<view class="nav_shop_image">
					<image :src="theme.nav_shop_image"></image>
				</view>
				<view class="nav_shop_title">淘气游甄选优质店铺-花海网游</view>
				<view class="nav_shop_body" :style="{'background': theme.nav_shop_body}">
					
				</view>
			</view>
		</view>
		
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px', 'background': '#252A34'}" v-if="headerIf" class="index_nav index_nav_fxed">
			<view class="nav_head">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_search">
						<image src="../../static/popularGames/search.png"  @click="navigateTo('search')"></image>
					</view>
					<view class="head_right_more">
						<image src="../../static/popularGames/more.png"  @click="navigateTo('serve')"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="popularGames_body">
			<view class="popularGames_body_screen"  :class="theme.back_dark == 'dark' ? 'dark_class' : 'light_class'">
				<view class="popularGames_body_screen_left" @click="show = true">
					<view class="popularGames_body_screen_left_text">{{ data.sort_name }}</view>
					<view class="popularGames_body_screen_left_lower"></view>
				</view>
				<view class="popularGames_body_screen_right" @click="screen_show = true">
					<view class="popularGames_body_screen_left_text">{{ data.screen_name }}</view>
					<view class="popularGames_body_screen_left_lower"></view>
				</view>
			</view>
			
			<view class="popularGames_body_wrap">
				<view class="item u-border-bottom" @click="navigateTo('popularDetail')" v-for="(item, index) in list" :key="index" :style="{'background': theme.itemColor}">
					<view class="popularGames_body_wrap_item_img">
						<image :src="item.image"></image>
						<view class="popularGames_body_wrap_item_img_bottom">
							<view class="popularGames_body_wrap_item_img_number">
								<view class="popularGames_body_wrap_item_img_number_icone">
									<image src="../../static/popularGames/check.png"></image>
								</view>
								{{ item.number }}
							</view>
							<view class="popularGames_body_wrap_item_img_price">上传时间：{{ item.time }}</view>
						</view>
					</view>
					<view class="popularGames_body_wrap_item_body">
						<view class="popularGames_body_wrap_item_body_tflex">
							<view class="popularGames_body_wrap_item_body" :class="theme.back_item">
								<view class="popularGames_body_wrap_item_body_title">
									{{ item.title }}
								</view>
								<view class="popularGames_body_wrap_item_body_price">
									<view class="popularGames_body_wrap_item_body_price_img">
										<image :src="theme.back_pice" mode=""></image>
									</view>
									<view class="popularGames_body_wrap_item_body_price_ti">{{ item.price }}</view>
								</view>
							</view>
						</view>
						<view class="popularGames_body_wrap_item_body_tag">
							<view class="popularGames_body_wrap_item_body_tag_chaozhi" :class="theme.back_item">
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_img">
									<image src="../../static/popularGames/buying.png"></image>
								</view>
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_text">超值购买</view>
							</view>
							<view class="popularGames_body_wrap_item_body_tag_chaozhi" :class="theme.back_item">
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_img">
									<image src="../../static/popularGames/selection.png"></image>
								</view>
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_text">皮肤任选</view>
							</view>
							<view class="popularGames_body_wrap_item_body_tag_chaozhi" :class="theme.back_item">
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_img">
									<image src="../../static/popularGames/sheng.png"></image>
								</view>
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_text">膜拜大神</view>
							</view>
							<view class="popularGames_body_wrap_item_body_tag_chaozhi" :class="theme.back_item">
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_img">
									<image src="../../static/popularGames/level.png"></image>
								</view>
								<view class="popularGames_body_wrap_item_body_tag_chaozhi_text">级别超高</view>
							</view>
						</view>
					</view>
					
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>
		
		<u-picker :show="show" :columns="[sortList]" keyName="name" :closeOnClickOverlay="true" title="排序"
			@close="cancel" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-picker :show="screen_show" :columns="[screenList]" keyName="name" :closeOnClickOverlay="true" title="筛选"
			@close="cancel" @cancel="cancel" @confirm="confirms"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerIf: false,
				theme: {
					backgroundColor: '',
					nav_shop_body: '',
					itemColor: '',
					nav_shop_image: '',
					index_nav_banner: '',
					back_item: ''
				},
				StatusBar: this.StatusBar,
				show: false,
				screen_show: false,
				list: [
					{
						image: 'http://img.taoqiyou.com/common/39f1739b-c4e9-4444-bc4c-5f829315efc2.jpg',
						title: '可换绑-换绑前可登录网易大神玩，绝代风华可 换绑-换绑前可登录网易大神玩',
						number: 1267,
						price: 688,
						time: '2023-12-28'
					}
				],
				status: 'loadmore',
				page: 0,
				data: {
					sort: '',
					sort_name: '默认排序',
					screen: '',
					screen_name: '筛选细分'
				},
				sortList: [
					{
						name: '默认排序',
						id: 1
					},
					{
						name: '高到低',
						id: 2
					}
				],
				screenList: [
					{
						name: '筛选细分',
						id: 1
					},
					{
						name: '筛选超值',
						id: 2
					}
				]
			}
		},
		onReady(){
			plus.navigator.setStatusBarStyle("light"); //改变顶部的颜色
			var ai_if = 'yjwj'; // 判断当前游戏
			if(ai_if == 'yjwj') {
				this.theme.backgroundColor = '#252A34', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFE8E7', // 背景颜色 clas
				this.theme.itemColor = '#151A20', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/banner.png' ; // 头部背景
			}
			
			if(ai_if == 'wwqy') {
				this.theme.backgroundColor = '#252A34', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#E6EDFF', // 店铺内容背景颜色
				this.theme.itemColor = '#151A20', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = ''; // 优质店铺 背景
				this.theme.index_nav_banner = '' ; // 头部背景
			}
			
			if(ai_if == 'ys') {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #EFE5D1 0%, #FFFCF5 100%)', // 背景颜色
				this.theme.back_dark = 'powder', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFBE5', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'powder', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = ''; // 优质店铺 背景
				this.theme.index_nav_banner = '' ; // 头部背景
			}
			
			if(ai_if == 'wzry') {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #75A3FF 0%, #F1F6FF 100%)', // 背景颜色
				this.theme.back_dark = 'blue', // 背景颜色 clas
				this.theme.nav_shop_body = '#E6EDFF', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'blue', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = ''; // 优质店铺 背景
				this.theme.index_nav_banner = '' ; // 头部背景
			}
		},
		onReachBottom() {
			if(this.page >= 3) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.list.push(this.list[0]);
				if(this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		methods: {
			cancel() {
				this.show = false
				this.screen_show = false
			},
			confirm(row) {
				this.data.sort = row.value[0].id
				this.data.sort_name = row.value[0].name
				this.show = false
			},
			confirms(row) {
				this.data.screen = row.value[0].id
				this.data.screen_name = row.value[0].name
				this.screen_show = false
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.popularGames {
		width: 750rpx;
		overflow: hidden;
		
		&::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
		// 头部
		.index_nav {
			position: relative;
			margin-bottom: 0;
			padding-bottom: 0;
			.index_nav_banner {
				position: absolute;
				top: 0;
				width: 100%;
				height: 490rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.nav_head {
				height: 76rpx;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				margin-bottom: 0;
				padding-bottom: 0;
				align-items: center;
				.header_back {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
				}
				.head_right {
					margin-left: auto;
					display: flex;
					image {
						width: 100%;
						height: 100%;
					}
					.head_right_search {
						width: 68rpx;
						height: 68rpx;
						position: relative;
					}
					.head_right_more {
						width: 68rpx;
						height: 68rpx;
						position: relative;
						margin-left: 20rpx;
					}
				}
			}
			.nav_shop {
				position: relative;
				width: 686rpx;
				height: 384rpx;
				margin: 0 auto;
				margin-top: 285rpx;
				padding-top: 14rpx;
				.nav_shop_image {
					width: 686rpx;
					height: 304rpx;
					position: absolute;
					top: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.nav_shop_title {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					position: relative;
					z-index: 2;
					font-style: normal;
					text-transform: none;
					margin-bottom: 12rpx;
				}
				
				.nav_shop_body {
					width: 650rpx;
					height: 172rpx;
					position: relative;
					z-index: 2;
					background: #FFE8E7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin: 0 auto;
				}
			}
			
		}
		.index_nav_fxed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
		}
		// 内容
		.popularGames_body {
			padding: 100rpx 32rpx;
			padding-top: 0;
			margin-top: -80rpx;
			position: relative;
			z-index: 2;
			.popularGames_body_screen {
				width: 686rpx;
				height: 92rpx;
				border-radius: 76rpx 76rpx 76rpx 76rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				.popularGames_body_screen_left_text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.popularGames_body_screen_right {
					margin-left: 158rpx;
				}
				> view {
					display: flex;
				}
			}
			.dark_class {
				background-color: rgba(255,255,255,0.1);
				.popularGames_body_screen_left_lower {
					width: 36rpx;
					height: 36rpx;
					background: url(~@/static/popularGames/lower.png) no-repeat;
					background-size: 100%;
					margin-left: 12rpx;
				}
				
				.popularGames_body_screen_left_text {
					color: #FFF;
				}
			}
			.light_class {
				background-color: #FFFFFF;
				.popularGames_body_screen_left_lower {
					width: 36rpx;
					height: 36rpx;
					background: url(~@/static/popularGames/lower_guan.png) no-repeat;
					background-size: 100%;
					margin-left: 12rpx;
				}
				.popularGames_body_screen_left_text {
					color: #13171D;
				}
			}
			.popularGames_body_wrap {
				margin-top: 16rpx;
				> .item {
					width: 686rpx;
					height: 454rpx;
					overflow: hidden;
					background: #252A34;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding-top: 16rpx;
					margin-bottom: 16rpx;
					.popularGames_body_wrap_item_img {
						width: 662rpx;
						height: 230rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						position: relative;
						margin: 0 auto;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
						.popularGames_body_wrap_item_img_bottom{
							position: absolute;
							bottom: 0rpx;
							padding-bottom: 8rpx;
							width: 100%;
							display: flex;
							align-items: center;
							background: linear-gradient( 0deg, #42465E 0%, rgba(148,148,148,0) 100%);
							justify-content: space-between;
							.popularGames_body_wrap_item_img_number {
								font-weight: bold;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								display: flex;
								align-items: center;
								margin-left: 20rpx;
								.popularGames_body_wrap_item_img_number_icone { 
									width: 36rpx;
									height: 36rpx;
									margin-right: 8rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
							}
							.popularGames_body_wrap_item_img_price {
								font-weight: bold;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								display: flex;
								align-items: center;
								margin-right: 20rpx;
							}
						}
					}
					.popularGames_body_wrap_item_body {
						.popularGames_body_wrap_item_body_tflex {
							width: 662rpx;
							margin: 0 auto;
							margin-top: 16rpx;
							.popularGames_body_wrap_item_body {
								display: flex;
								align-items: center;
								margin-top: 24rpx;
								.popularGames_body_wrap_item_body_title{
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									width: 496rpx;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									overflow: hidden;
									margin-left: 24rpx;
								}
								.popularGames_body_wrap_item_body_price{
									display: flex;
									align-items: center;
									margin-left: 28rpx;
									.popularGames_body_wrap_item_body_price_img {
										width: 32rpx;
										height: 32rpx;
										margin-right: 8rpx;
										image {
											width: 100%;
											height: 100%;
										}
									}
									
									.popularGames_body_wrap_item_body_price_ti {
										font-family: PingFang SC, PingFang SC;
										font-weight: bold;
										font-size: 36rpx;
										height: 42rpx;
										text-align: left;
										font-style: normal;
									}
								}
							}
							.dark {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 85deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.popularGames_body_wrap_item_body_title{
									color: #FFFFFF;
								}
								
								.popularGames_body_wrap_item_body_price {
									color: #FFFFFF;
								}
							}
							
							.powder {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 88deg, #E4CBE6 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.popularGames_body_wrap_item_body_title{
									color: #13171D;
								}
								
								.popularGames_body_wrap_item_body_price {
									color: #13171D;
								}
							}
							
							.blue {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 90deg, #D5F5FF 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.popularGames_body_wrap_item_body_title{
									color: #13171D;
								}
								
								.popularGames_body_wrap_item_body_price {
									color: #13171D;
								}
							}
						}
						.popularGames_body_wrap_item_body_tag {
							display: flex;
							align-items: center;
							margin-left: 12rpx;
							margin-top: 20rpx;
							.popularGames_body_wrap_item_body_tag_chaozhi {
								width: 154rpx;
								height: 40rpx;
								border-radius: 68rpx 68rpx 68rpx 68rpx;
								display: flex;
								margin-right: 8rpx;
								.popularGames_body_wrap_item_body_tag_chaozhi_img {
									width: 36rpx;
									height: 36rpx;
									margin-left: 4rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
								.popularGames_body_wrap_item_body_tag_chaozhi_text {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-left: 8rpx;
								}
							}
							.dark {
								background: linear-gradient( 90deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 100%);
								.popularGames_body_wrap_item_body_tag_chaozhi_text{
									color: #FFFFFF;
								}
							}
							.powder {
								background:  linear-gradient( 90deg, #EFB0CE 0%, rgba(255,255,255,0) 100%);
								.popularGames_body_wrap_item_body_tag_chaozhi_text{
									color: #13171D;
								}
							}
							.blue {
								background: linear-gradient( 90deg, #D5F5FF 0%, rgba(255,255,255,0) 100%);
								.popularGames_body_wrap_item_body_tag_chaozhi_text{
									color: #13171D;
								}
							}
						}
					}
				}
			}
		}
	}
</style>